<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<MyHeader title="订单"></MyHeader>
			<view class="flex-col relative section_4">
				<view class="flex-col relative section_5">
					<view class="flex-row items-center self-stretch group_4">
						<view class="flex-row justify-start items-center text-wrapper">
							<text class="font_2 text_2 text_5">{{carOrder?.carpoolDetail?.startingLocation}}</text>
						</view>
						<view class="flex-col items-center group_5 ml-19">
							<text class="font text_2 text_4">{{carOrder?.carpoolDetail?.carNumber}}</text>
							<image class="image_7 mt-5"
								src="https://ide.code.fun/api/image?token=6777df90defdb100111196ee&name=366720e75bc9d40b595c082e0e0e189f.png" />
							<text class="text_2 text_7 mt-5">预计15分钟</text>
						</view>
						<view class="flex-row justify-start items-center text-wrapper_2 ml-19">
							<text class="font_2 text_2 text_6">{{carOrder?.carpoolDetail?.destination}}</text>
						</view>
					</view>
					<view class="flex-row items-center self-start group_6">
						<text
							class="flex-1 font_3 text_2 text_8">发车时间：{{dayjs(carOrder?.carpoolDetail?.appointmentTime).format('YYYY年MM月DD日')}}&nbsp;&nbsp;{{weekday}}</text>
						<text class="ml-20 shrink-0 font_3 text_2 text_9">13:30</text>
					</view>
					<view class="flex-row self-stretch group_7">
						<view class="flex-row items-baseline">
							<text class="font text_2 text_10">{{carOrder?.carpoolDetail?.driverName}}</text>
							<text class="font text_2 text_11 ml-7">{{carOrder?.carpoolDetail?.driverPhone}}</text>
						</view>
						<text
							class="ml-18 font text_2 text_12">{{carOrder?.carpoolDetail?.carBrand + '·' + carOrder?.carpoolDetail?.carColor}}</text>
					</view>
				</view>
				<view class="flex-row justify-between group_8">
					<view class="flex-row items-baseline">
						<text class="font_3">订单总金额</text>
						<text class="ml-10 font_4 text_13">¥{{carOrder?.carpoolDetail?.orderCost}}</text>
					</view>
					<view class="flex-row items-baseline">
						<text class="font_3">个人订单金额</text>
						<text class="ml-10 font_4 text_14">¥{{totalPrice*5}}.00</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col group_9">
			<text class="self-start font_2 text_2 text_15">乘客信息</text>
			<view class="flex-col self-stretch mt-15">
				<view class="flex-col section_6">
					<view v-for="(item,index) in carOrder.carpoolPassengerList" :key="index"
						class="flex-row justify-between group_10">
						<view class="flex-row items-baseline">
							<text class="font_2 text_2">{{item.userNickName}}</text>
							<text class="ml-14 font_5 text_2 text_16">{{item.userPhone}}</text>
						</view>
						<text class="font_2 text_2 text_17">未支付</text>
						<uni-icons type="clear" size="30" @click="deletePassage(item)"></uni-icons>
					</view>
				</view>
				<view @click="goAddRider" class="mt-20 flex-col justify-start items-center text-wrapper_3">
					<text class="font_6 text_22">添加乘客</text>
				</view>
			</view>
		</view>
		<view class="flex-col items-start group_14">
			<text class="font_7 text_23">温馨提示：</text>
			<text class="mt-14 font_7 text_24">购票成功后，请提前15分钟到达发车位置等候车辆</text>
		</view>
		<view class="flex-row justify-between items-center section_7">
			<view class="flex-row items-baseline group_15">
				<text class="font_4 text_26">¥{{totalPrice*5}}.00</text>
				<text class="font_3 text_25">订单金额：</text>
			</view>
			<view class="flex-col justify-start items-center text-wrapper_4"><text class="font_6 text_27">立即支付</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		getCarOrderAPI,
		delOrderRiderAPI
	} from '../../../apis/taxi';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getWeekDay
	} from '../../../utils';
	import dayjs from 'dayjs';
	import {
		useUserStore
	} from '../../../store/useUserStore';
	const props = defineProps({
		id: {
			type: Number
		}
	})
	const carOrder = reactive({})
	const userStore = useUserStore()
	const totalPrice = ref('')
	const carpoolId = ref('')
	const weekday = computed(() => {
		return getWeekDay(carOrder?.carpoolDetail?.appointmentTime)
	})
	const getCarOrder = async () => {
		const res = await getCarOrderAPI(props.id)
		Object.assign(carOrder, res.data)
		totalPrice.value = res.data.carpoolPassengerList.length
		carpoolId.value = res.data.carpoolDetail.id
	}

	onLoad(() => {
		userStore.clearOrderRider()
		getCarOrder()
	})
	onShow(() => {
		getCarOrder()
	})
	// 跳转添加乘客页面
	const goAddRider = () => {
		uni.navigateTo({
			url: '/subpkg/myother/rider/index/index?status=1&carpoolId=' + carpoolId.value
		})
	}
	const deletePassage = async(item) => {
		console.log(item);
		const res = await delOrderRiderAPI({
			id:item.id
		})
		console.log(res);
	}
</script>

<style scoped>
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-19 {
		margin-left: 38rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-5 {
		margin-top: 10rpx;
	}

	.page {
		background-color: #f7f8fa;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		height: 614rpx;
	}

	.section {
		padding: 36rpx 12rpx 218rpx 34rpx;
		background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
	}

	.group_2 {
		padding-left: 36rpx;
		padding-right: 16rpx;
	}

	.text {
		color: #333333;
		font-size: 30rpx;
		font-family: SFProText;
		font-weight: 600;
		line-height: 21.78rpx;
	}

	.image {
		width: 34rpx;
		height: 22rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 22rpx;
	}

	.image_3 {
		width: 48rpx;
		height: 22.66rpx;
	}

	.group_3 {
		padding: 20rpx 0 12rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 34rpx;
	}

	.pos_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.section_2 {
		padding: 12rpx 24rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.image-wrapper {
		width: 38rpx;
	}

	.image_6 {
		width: 38rpx;
		height: 14rpx;
	}

	.section_3 {
		background-color: #33333333;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.section_4 {
		margin: 0rpx 24rpx 0;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.section_5 {
		padding: 36rpx 36rpx 44rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 8rpx #0000001a;
	}

	.group_4 {
		padding-left: 38rpx;
		padding-right: 32rpx;
	}

	.text-wrapper {}

	.font_2 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.54rpx;
		color: #333333;
	}

	.group_5 {
		flex: 1 1 162rpx;
	}

	.image_7 {
		width: 120rpx;
		height: 8rpx;
	}

	.text-wrapper_2 {}

	.group_6 {
		margin-top: 28rpx;
		width: 550rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.12rpx;
		color: #333333;
	}

	.group_7 {
		margin-top: 16rpx;
	}

	.font {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 21.78rpx;
		color: #808080;
	}

	.group_8 {
		padding: 56rpx 36rpx;
	}

	.font_4 {
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 26.12rpx;
		color: #eb5959;
	}

	.text_13 {
		color: #333333;
		line-height: 27.32rpx;
	}

	.text_14 {
		line-height: 27.5rpx;
	}

	.group_9 {
		margin-top: 44rpx;
		padding: 0 24rpx;
	}

	.section_6 {
		padding: 0 16rpx 24rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.group_10 {
		padding: 36rpx 32rpx 36rpx 36rpx;
		border-bottom: solid 1rpx #e5e5e5;
		align-items: center;
	}

	.font_5 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 26.12rpx;
		color: #333333;
	}

	.text_2 {
		opacity: 0.9;
	}

	.text_15 {
		margin-left: 20rpx;
		color: #4c8eef;
		line-height: 30.14rpx;
	}

	.text_12 {
		line-height: 22.18rpx;
	}

	.text_11 {
		line-height: 18.22rpx;
	}

	.text_10 {
		line-height: 22.28rpx;
	}

	.text_9 {
		color: #eb5959;
		line-height: 21.4rpx;
	}

	.text_8 {
		line-height: 52rpx;
		text-align: center;
	}

	.text_6 {
		line-height: 29.82rpx;
	}

	.text_7 {
		color: #808080;
		font-size: 20rpx;
		font-family: SourceHanSansCN;
		line-height: 18.42rpx;
	}

	.text_4 {
		color: #4c8eef;
		line-height: 22.16rpx;
	}

	.text_5 {
		line-height: 30.02rpx;
	}

	.text_3 {
		color: #333333;
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		line-height: 33.2rpx;
	}

	.text_16 {
		line-height: 24.28rpx;
	}

	.text_17 {
		line-height: 29.48rpx;
	}

	.group_11 {
		border-bottom: solid 1rpx #e5e5e5;
	}

	.group_12 {
		padding: 36rpx 32rpx;
		border-bottom: solid 1rpx #e5e5e5;
	}

	.text_18 {
		line-height: 24.28rpx;
	}

	.text_19 {
		line-height: 29.48rpx;
	}

	.group_13 {
		padding: 36rpx 32rpx;
	}

	.text_20 {
		line-height: 24.28rpx;
	}

	.text_21 {
		line-height: 29.48rpx;
	}

	.text-wrapper_3 {
		padding: 28rpx 0 24rpx;
		background-color: #4c8eef;
		border-radius: 56rpx;
	}

	.font_6 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 29.54rpx;
		color: #ffffff;
	}

	.text_22 {
		line-height: 30.04rpx;
	}

	.group_14 {
		margin-top: 56rpx;
		padding: 0 60rpx;
	}

	.font_7 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.12rpx;
		color: #808080;
	}

	.text_23 {
		line-height: 25.78rpx;
	}

	.text_24 {
		line-height: 26.72rpx;
	}

	.section_7 {
		margin-top: 192rpx;
		padding: 24rpx 52rpx;
		background-color: #ffffff;
	}

	.group_15 {
		width: 239.4rpx;
	}

	.text_26 {
		margin-left: 136rpx;
		line-height: 27.5rpx;
	}

	.text_25 {
		margin-left: -240rpx;
	}

	.text-wrapper_4 {
		padding: 24rpx 0;
		background-color: #eb5959;
		border-radius: 12rpx;
		width: 286rpx;
		height: 80rpx;
	}

	.text_27 {
		line-height: 29.98rpx;
	}
</style>